<template>
  <div class="backissue">
    <div class="topsearch">
      <a-space>
        <a-input placeholder="商品ID" class="br4" v-model="itemId"/>
        <span style="margin-left: 15px">订单间隔:</span>
        <a-input class="br4" v-model.number="startm" style="width: 50px"/>
        <span>至</span>
        <a-input class="br4" v-model.number="endm" style="width: 50px"/>
        <span style="margin-right: 10px;">秒</span>
        <span>订单数量:</span>
        <a-input class="br4" v-model="num" style="width: 100px"/>
        <a-button class="br4" type="primary" @click="getdata">
          添 加
        </a-button>
      </a-space>
    </div>
    <div id="_magix_router_view_uid_2">
      <div class="main manage-main main-has-side-nav" id="main">
        <div mx-vframe="true" id="magix_vf_main" class="innermain">
          <div
            mx-view="app/views/manage/effect/service_order?_renderFrom=magix-router&amp;_depth=1&amp;_viewName=default"
            id="_magix_router_view_uid_4">
            <div id="mx_27">
              <div mxa="pub-three6:_" class="pub-threehd clearfix">
                <a
                  class="pub-threehe pub-threehf"
                  href="javascript:;"
                  id="mx_27_succeed"
                >成交订单明细 </a>
                <a
                  class="pub-threehe "
                  href="javascript:;"
                  id="mx_27_failed"
                >维权退款订单明细 </a>
                <span
                  class="pub-threehh"
                  style="left: 0px; width: 144px;"></span>
              </div>
            </div>
            <div mx-view="app/views/manage/effect/service_order_succeed" id="service_order_content">
              <div
                mxs="pub-threeaQ:_"
                class="common-tip mt20 mb20"
                data-spm-anchor-id="a219t.11816982.0.i2.1aba6a15AsknRL">
                <i
                  class="pubfont icon-shuoming"></i>
                <span
                  class="ml32">报表分时下载工具终于上线了！单日超过1万条订单可以按照最高秒级别分段下载。<a
                  href="javascript:void(0)"
                  class="color-brand"
                  mx-click="service_order_contentgetTimeshareDownload()"
                  data-spm-click="gostr=/alimama.11;locaid=dba42f2aa">体验报表分时下载</a>
                </span>
              </div>

              <div
                mxv=""
                mxa="pub-threeaQ:_"
                class="mt10 clearfix"
                data-spm-anchor-id="a219t.11816982.0.i3.1aba6a15AsknRL">
                <span
                  mxv=""
                  mxa="pub-threeaQ:a"
                  class="fl mr10">
                  <div
                    mxv="statusList"
                    class="w120 dropdown"
                    mx-change="service_order_contentchange()"
                    data-spm-click="gostr=/alimama.11;locaid=dc355ea63"
                    mx-view="app/gallery/mx-dropdown/index?textKey=name&amp;valueKey=code&amp;selected=&amp;list=1"
                    id="mx_43">
                    <div id="toggle_mx_43" class="mx-trigger ">
                      <span
                        mxa="pub-threer:_"
                        class="mx-trigger-label"
                        contenteditable> 全部订单</span>
                      <span
                        mxs="pub-threer:_"
                        class="mc-iconfont mx-trigger-arrow">
                        </span>
                    </div>
                    <div mxv="" id="menu_mx_43" class="mx-output mx-output-bottom "></div>
                  </div>
                </span>
                <div
                  mxv="shortkeys"
                  class="w200 fl"
                  mx-change="service_order_contentchangeTime()"
                  data-spm-click="gostr=/alimama.11;locaid=de74fb34e"
                  mx-view="app/gallery/mx-calendar/rangepicker?min=2020-09-01&amp;max=2020-11-30&amp;shortcuts=false&amp;start=2020-11-24&amp;end=2020-11-30&amp;shortkeys=2"
                  id="mx_44">
                  <div
                    class="mx-trigger pub-threeu pub-threex "
                    id="trigger_mx_44"
                    mx-click="mx_44__t()"
                    mx-change="mx_44__q()">
                    <span
                      mxa="pub-threed:_"
                      class="pub-threey pub-threez"
                      contenteditable>2020-11-24</span>
                    <span
                      mxa="pub-threed:a"
                      class="pub-threew color-9">至</span>
                    <span
                      mxa="pub-threed:b"
                      class="pub-threey pub-threeA"
                      contenteditable>2020-11-30</span>
                  </div>
                </div>
                <div mxa="pub-threeaQ:c" class="fr">
                  <div
                    mx-view="app/gallery-local/lg-download/index?url=%2Freport%2FgetCPPaymentDetails.json%3FqueryType%3D1%26payStatus%3D%26DownloadID%3DDOWNLOAD_EXPORT_SERVICE_FEE_OVERVIEW%26startTime%3D2020-11-24%26endTime%3D2020-11-30"
                    id="mx_45">
                    <a
                      href="#"
                      class="btn btn-common fr">
                      <span
                        mxs="pub-three^:b"
                        class="pubfont mr5">
                        </span>下载报表 </a>
                  </div>
                </div>
              </div>
              <div
                class="table-container mt10 table_no_scrollbar"
                mxa="pub-threeaQ:d"
                id="service_order_succeed_wrapper"
              >
                <div
                  mxa="pub-threeaQ:e"
                  mx-view="app/gallery/mx-table/index?sticky=true&amp;scrollWrapper=service_order_succeed_wrapper"
                  id="mx_70">
                  <div
                    class="pub-threegX"
                    mx_70_left="mx_70_left"
                    style="width: 300px; padding-top: 60px;position: inherit;z-index: 2;">
                    <table
                      mxa="pub-threeaQ:f"
                      class="table"
                      left="true"
                      id="mx_70_left_table"
                      style="width: 300px;">
                      <thead
                        mxs="pub-threeaQ:b"
                        style="width: 300px; position: absolute; z-index: 80; top: 0px;">
                        <tr style="height: 60px;">
                          <th class="left" width="300" style="width: 300px;">商品信息</th>
                        </tr>
                      </thead>
                      <tbody>
                        <!--                        <tr class="" style="height: 107.273px;">-->
                        <!--                          <td mxa="pub-threeaQ:g" class="left" width="30%" style="width: 332px;">-->
                        <!--                            <div>-->
                        <!--                              <h6 mxa="pub-threeaQ:h" class="mb5 title"><a-->
                        <!--                                href="http://item.taobao.com/item.htm?id=576331005232"-->
                        <!--                                class="color-d"-->
                        <!--                                target="_blank"-->
                        <!--                                title="粘毛器可撕式粘尘纸去毛神器衣物衣服滚筒沾毛替换卷黏毛滚刷除毛"-->
                        <!--                                data-spm-click="gostr=/alimama.11;locaid=dd614d584">粘毛器可撕式粘尘纸去毛神器衣物衣服滚筒沾毛替换卷黏毛滚刷除毛</a>-->
                        <!--                              </h6>-->
                        <!--                              <div mxa="pub-threeaQ:i" class="color-l">-->
                        <!--                                <p>商品ID：576331005232</p>-->
                        <!--                                <p class="overflow_dotted" title="inwejia旗舰店">所属店铺：inwejia旗舰店</p>-->
                        <!--                              </div>-->
                        <!--                            </div>-->
                        <!--                          </td>-->
                        <!--                        </tr>-->
                        <tr style="height: 110px;line-height: 1;" v-for="(v,k) in goodslist" :key="k">
                          <td mxa="pub-threeaQ:g" class="left" width="30%" style="width: 332px;height: 110px;padding: 16px 8px!important;">
                            <div contenteditable>
                              <h6 mxa="pub-threeaQ:h" class="mb5 title">
                                <a
                                  :href="v.item_url"
                                  class="color-d"
                                  target="_blank"
                                  :title="v.title"
                                  data-spm-click="gostr=/alimama.11;locaid=dd614d584" >{{ v.title }}</a>
                              </h6>
                              <div mxa="pub-threeaQ:i" class="color-l">
                                <p>商品ID：{{ v.item_id }}</p>
                                <p class="overflow_dotted" :title="v.shop_title">所属店铺：{{ v.shop_title }}</p>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div
                    mx_70_main="mx_70_main"
                    class="pub-threegV"
                    style="left: 300px;"
                    ref="father">
                    <table
                      mxa="pub-threeaQ:j"
                      class="table"
                      center="true"
                      id="mx_70_main_table"
                      style="width: 1424.03px;">
                      <thead
                        mxs="pub-threeaQ:d"
                        style="width: 1424.03px;z-index: 80; top: 0px;">
                        <tr style="height: 60px;">
                          <th class="left" width="180" style="width: 183px;">创建时间</th>
                          <th class="left" width="100" style="width: 101px;">订单状态<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?width=300&amp;content=%E8%AE%A2%E5%8D%95%E4%BB%98%E6%AC%BE%EF%BC%9A%E8%AE%A2%E5%8D%95%E5%B7%B2%E4%BB%98%E6%AC%BE%EF%BC%8C%E6%9C%AA%E7%A1%AE%E8%AE%A4%E6%94%B6%E8%B4%A7%3Cbr%2F%3E%20%E8%AE%A2%E5%8D%95%E6%88%90%E5%8A%9F%EF%BC%9A%E8%AE%A2%E5%8D%95%E5%B7%B2%E7%A1%AE%E8%AE%A4%E6%94%B6%E8%B4%A7%EF%BC%8C%E5%95%86%E5%AE%B6%E4%BD%A3%E9%87%91%E6%9C%AA%E6%94%AF%E4%BB%98%20%3Cbr%2F%3E%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97%EF%BC%9A%E8%AE%A2%E5%8D%95%E5%B7%B2%E7%A1%AE%E8%AE%A4%E6%94%B6%E8%B4%A7%EF%BC%8C%E5%95%86%E5%AE%B6%E4%BD%A3%E9%87%91%E5%B7%B2%E6%94%AF%E4%BB%98%20%3Cbr%2F%3E%E8%AE%A2%E5%8D%95%E5%A4%B1%E6%95%88%EF%BC%9A%E8%AE%A2%E5%8D%95%E5%9C%A8%E6%B7%98%E5%AE%9D%E5%B7%B2%E5%85%B3%E9%97%AD"
                            id="mx_71"></i></th>
                          <th class="left" width="100" style="width: 101px;">服务费率<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?content=%E5%95%86%E5%93%81%E6%9C%8D%E5%8A%A1%E8%B4%B9%E7%8E%87"
                            id="mx_72"></i></th>
                          <th class="left" width="100" style="width: 101px;">付款金额<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?content=%E4%B9%B0%E4%B9%B0%E5%AE%B6%E6%8B%8D%E4%B8%8B%E5%B9%B6%E4%BB%98%E6%AC%BE%E9%87%91%E9%A2%9D%EF%BC%88%E4%B8%8D%E5%8C%85%E5%90%AB%E8%BF%90%E8%B4%B9%E9%87%91%E9%A2%9D%E3%80%81%E4%B8%8D%E5%8C%85%E5%90%AB%E6%9C%AA%E6%94%AF%E4%BB%98%E5%B0%BE%E6%AC%BE%E7%9A%84%E9%A2%84%E5%94%AE%E8%AE%A2%E5%8D%95%E9%87%91%E9%A2%9D%EF%BC%89"
                            id="mx_73"></i></th>
                          <th class="left" width="120" style="width: 122px;">预估付款服务费<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?width=300&amp;content=%E4%BB%A5%E4%B9%B0%E5%AE%B6%E4%BB%98%E6%AC%BE%E9%87%91%E9%A2%9D%E4%B8%BA%E5%9F%BA%E6%95%B0%EF%BC%8C%E9%A2%84%E4%BC%B0%E6%82%A8%E5%8F%AF%E8%83%BD%E8%8E%B7%E5%BE%97%E7%9A%84%E6%9C%8D%E5%8A%A1%E8%B4%B9%E6%94%B6%E5%85%A5%E3%80%82%E5%9B%A0%E4%B9%B0%E5%AE%B6%E9%80%80%E6%AC%BE%E7%AD%89%E5%8E%9F%E5%9B%A0%EF%BC%8C%E5%AE%9E%E9%99%85%E8%8E%B7%E5%BE%97%E5%8F%AF%E8%83%BD%E4%B8%8E%E9%A2%84%E4%BC%B0%E4%B8%8D%E4%B8%80%E8%87%B4%E3%80%82"
                            id="mx_74"></i></th>
                          <th class="left" width="100" style="width: 102px;">结算时间<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?content=%E4%B9%B0%E5%AE%B6%E7%A1%AE%E8%AE%A4%E6%94%B6%E8%B4%A7%E4%B8%94%E9%98%BF%E9%87%8C%E5%A6%88%E5%A6%88%E5%AE%8C%E6%88%90%E5%95%86%E5%AE%B6%E4%BD%A3%E9%87%91%E6%89%A3%E6%AC%BE%E7%9A%84%E6%97%B6%E9%97%B4"
                            id="mx_75"></i></th>
                          <th class="left" width="100" style="width: 102px;">结算金额<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?content=%E4%B9%B0%E5%AE%B6%E7%A1%AE%E8%AE%A4%E6%94%B6%E8%B4%A7%E7%9A%84%E4%BB%98%E6%AC%BE%E9%87%91%E9%A2%9D%EF%BC%88%E4%B8%8D%E5%8C%85%E5%90%AB%E8%BF%90%E8%B4%B9%E9%87%91%E9%A2%9D%EF%BC%89"
                            id="mx_76"></i></th>
                          <th class="left" width="120" style="width: 122px;">预估结算服务费<i
                            class="ml5 pubfont"
                            mx-view="app/gallery/mx-popover/index?width=300&amp;placement=bottom&amp;align=right&amp;content=%E4%BB%A5%E4%B9%B0%E5%AE%B6%E7%A1%AE%E8%AE%A4%E6%94%B6%E8%B4%A7%E6%97%B6%E7%9A%84%E4%BB%98%E6%AC%BE%E9%87%91%E9%A2%9D%E4%B8%BA%E5%9F%BA%E6%95%B0%EF%BC%8C%E9%A2%84%E4%BC%B0%E6%82%A8%E5%8F%AF%E8%83%BD%E8%8E%B7%E5%BE%97%E7%9A%84%E6%94%B6%E5%85%A5%E3%80%82%E5%9B%A0%E4%B9%B0%E5%AE%B6%E9%80%80%E6%AC%BE%E3%80%81%E6%82%A8%E8%BF%9D%E8%A7%84%E6%8B%9B%E5%95%86%E7%AD%89%E5%8E%9F%E5%9B%A0%EF%BC%8C%E5%8F%AF%E8%83%BD%E4%B8%8E%E6%82%A8%E6%9C%80%E7%BB%88%E6%94%B6%E5%85%A5%E4%B8%8D%E4%B8%80%E8%87%B4%E3%80%82%E6%9C%80%E7%BB%88%E6%94%B6%E5%85%A5%E4%BB%A5%E6%9C%88%E7%BB%93%E5%90%8E%E6%82%A8%E5%AE%9E%E9%99%85%E6%94%B6%E5%88%B0%E7%9A%84%E4%B8%BA%E5%87%86%E3%80%82"
                            id="mx_77"></i></th>
                          <th width="120" style="width: 122px;">招商渠道ID</th>
                          <th width="120" style="width: 122px;">招商渠道名称</th>
                          <th width="120" style="width: 123px;">推广者id</th>
                          <th width="120" style="width: 123px;">推广者名称</th>
                        </tr>
                      </thead>
                      <tbody id="infos">
                        <tr class="" style="height: 110px;" v-for="(v,k) in goodslist" :key="k">
                          <td mxa="pub-threeaQ:k" class="left" style="width: 207.636px;height: 110px" contenteditable>{{ v.time }}</td>
                          <td mxa="pub-threeaQ:l" class="left" style="width: 119.636px;height: 110px" contenteditable>订单付款</td>
                          <td mxa="pub-threeaQ:m" class="left" style="width: 127.515px;height: 110px">
                            <span contenteditable @input="change2($event,k)">2.00</span>%
                          </td>
                          <td mxa="pub-threeaQ:n" class="left" style="width: 129.333px;height: 110px">
                            <span class="yuan">￥</span>
                            <span class="integer" contenteditable @input="change($event,k)">{{ (Number(v.zk_final_price)).toFixed(2) | numFormat }}</span>
                          </td>
                          <td mxa="pub-threeaQ:o" class="left" style="width: 140.242px;height: 110px">
                            <span class="yuan">￥</span>
                            <span class="integer" contenteditable>{{ (v.forecast).toFixed(2) | numFormat }}</span>
                          </td>
                          <td mxa="pub-threeaQ:p" class="left" style="width: 116.606px;height: 110px" contenteditable></td>
                          <td mxa="pub-threeaQ:q" class="left" style="width: 117.212px;height: 110px" contenteditable> -- </td>
                          <td mxa="pub-threeaQ:r" class="left" style="width: 140.848px;height: 110px" contenteditable>
                            <span class="yuan">￥</span>
                            <span class="integer" contenteditable>0.00</span>
                          </td>
                          <td style="width: 131.758px;height: 110px" contenteditable></td>
                          <td style="width: 131.758px;height: 110px" contenteditable></td>
                          <td style="width: 131.758px;height: 110px" contenteditable></td>
                          <td style="width: 153.697px;height: 110px" contenteditable></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <!--                <div mxs="pub-threeaQ:e" mx-view="app/gallery-local/lg-snippets/empty" id="mx_78">-->
                <!--                  <div class="empty-area" data-spm-anchor-id="a219t.11816982.0.i0.1aba6a15AsknRL">-->
                <!--                    <i-->
                <!--                      mxs="pub-three|:_"-->
                <!--                      class="mc-iconfont no-data"></i>-->
                <!--                    <p>暂无数据</p>-->
                <!--                  </div>-->
                <!--                </div>-->
              </div>
              <div
                class="tc mt20"
                mx-change="service_order_contentchangePage()"
                data-spm-click="gostr=/alimama.11;locaid=df3f810a3"
                mx-view="app/gallery-local/lg-pagination/index?size=40&amp;page=1&amp;hasNext=false"
                id="mx_79">
                <ul mxa="pub-three):_" class="clearfix pub-threeij">
                  <li mxa="pub-three):a" class="pub-threeik"><a
                    class="pub-threeil"
                    href="#"
                    mx-click="mx_79__N()">
                    <i
                      mxs="pub-three):_"
                      class="mc-iconfont num-item-icon">
                      </i>上一页</a>
                  </li>
                  <li mxa="pub-three):b" class="pub-threeik">
                    <a
                      class="pub-threeil"
                      style="background: #f4f4f4;color: #333;"
                      href="#"
                      mx-click="mx_79__N()">下一页<i
                        mxs="pub-three):a"
                        class="mc-iconfont num-item-icon rotate180">
                        </i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="manage-footer"
          mx-view="app/gallery/mx-footer/index?mode=simple"
          data-spm-click="gostr=/alimama.11;locaid=dd72b12ae"
          id="mx_12">
          <div class="pub-threecS" style="width: 1000px; text-align: center;">
            <div mxa="pub-threeB:d" class="pub-threecT">
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.alimama.com/">
                <span>关于阿里妈妈</span>
              </a>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.alimama.com/home/about-1.htm">
                <span>联系客服</span>
              </a>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://open.taobao.com/">
                <span>开放平台</span>
              </a>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://jubao.alibaba.com/">
                <span>廉正举报</span>
              </a>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.alimama.com/home/about-4.htm">
                <span>意见反馈</span>
              </a>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_ali_mama_division/suit_bu1_ali_mama_division201709111812_13128.html">
                <span>法律声明</span>
              </a>
            </div>
            <div mxa="pub-threeB:d" class="pub-threecT">
              <span mxa="pub-threeB:e" class="pub-threecV">
                <span>© 2007-现在 阿里妈妈版权所有</span>
              </span>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://beian.miit.gov.cn/">
                <span>增值电信业务经营许可证：浙B2-20070195</span>
              </a>
            </div>
            <div mxa="pub-threeB:d" class="pub-threecT">
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://idinfo.zjamr.zj.gov.cn/bscx.do?method=lzxx&amp;id=3301843301080000022791">
                <img
                  src="//img.alicdn.com/tfs/TB1D24er.T1gK0jSZFrXXcNCXXa-65-70.png"
                  width="20">
              </a>
              <a
                class="pub-threecU"
                target="_blank"
                rel="noopener noreferrer"
                href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010002000075">
                <img
                  src="//img.alicdn.com/tfs/TB1hIher4z1gK0jSZSgXXavwpXa-20-20.png"
                  width="20">
                <span>浙公网安备 33010002000075号</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import moment from 'moment'
  import BScroll from 'better-scroll'
  export default {
    name: 'Backissue',
    data () {
      return {
        moment,
        itemId: '',
        startm: '',
        endm: '',
        num: '',
        midtime: moment().format('YYYY-MM-DD HH:mm:ss'),
        goodslist: [
          // {
          //   time: '2020-11-30 11:19:10',
          //   category_id: 50011979,
          //   category_name: '液态精华',
          //   commission_rate: '5000',
          //   commission_type: 'MKT',
          //   coupon_amount: '300',
          //   coupon_end_time: '2020-12-03',
          //   coupon_id: '359d70a2068c442babd714ce170c91fd',
          //   coupon_info: '满499元减300元',
          //   coupon_remain_count: 100000,
          //   coupon_start_fee: '499',
          //   coupon_start_time: '2020-12-01',
          //   coupon_total_count: 100000,
          //   include_dxjh: 'true',
          //   include_mkt: 'true',
          //   info_dxjh: '{}',
          //   item_description: '一盒44支装 寡肽冻干粉',
          //   item_id: 598161855552,
          //   item_url: 'https://detail.tmall.com/item.htm?id=598161855552',
          //   level_one_category_id: 1801,
          //   level_one_category_name: '美容护肤/美体/精油',
          //   nick: 'mergian旗舰店',
          //   num_iid: 598161855552,
          //   pict_url: 'https://img.alicdn.com/bao/uploaded/i2/2757170196/O1CN01RXF8LD1DJoGb9W8fI_!!0-item_pic.jpg',
          //   presale_deposit: '0',
          //   presale_end_time: 0,
          //   presale_start_time: 0,
          //   presale_tail_end_time: 0,
          //   presale_tail_start_time: 0,
          //   provcity: '广东 广州',
          //   real_post_fee: '0.00',
          //   reserve_price: '799',
          //   seller_id: 2757170196,
          //   shop_dsr: 49118,
          //   small_images: {
          //     string: [
          //       'https://img.alicdn.com/i2/2757170196/O1CN01ldo03Y1DJoEm8VCa0_!!2757170196-0-lubanu-s.jpg',
          //       'https://img.alicdn.com/i2/2757170196/O1CN01i14bMi1DJoEf5hoFA_!!2757170196-0-lubanu-s.jpg',
          //       'https://img.alicdn.com/i4/2757170196/O1CN011mmlaS1DJoGAWvV8Q_!!2757170196.jpg',
          //       'https://img.alicdn.com/i2/2757170196/O1CN013pnVgP1DJoF4S08F4_!!2757170196-0-lubanu-s.jpg'
          //     ]
          //   },
          //   shop_title: 'mergian旗舰店',
          //   short_title: '美肌颜冻干粉寡肽44支印修复套盒',
          //   superior_brand: '0',
          //   title: '美肌颜冻干粉寡肽原液套盒44支印修复痘坑精华旗舰店官方正品',
          //   tk_total_commi: '2488296.46',
          //   tk_total_sales: '25230',
          //   user_type: 1,
          //   volume: 8807,
          //   white_image: 'https://img.alicdn.com/bao/uploaded/O1CN01auN4hU24pZMnb0yyd_!!6000000007440-2-yinhe.png',
          //   zk_final_price: '499',
          //   forecast: 0
          // }
        ]
      }
    },
    computed: {},
    filters: {
      numFormat (input) {
        return input && input.toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
    },
    created () {
      this.$nextTick(() => {
        this.personScroll()
      })
    },
    mounted () {

    },
    methods: {
      // 券后价修改
      change (e, k) {
        // console.log(e.target.innerText, k)
        this.goodslist[k].forecast = Number(e.target.innerText) * this.goodslist[k].rate
      },
      // 费率修改
      change2 (e, k) {
        // console.log(e.target.innerText)
        this.goodslist[k].rate = Number(e.target.innerText) / 100
        this.goodslist[k].forecast = Number(this.goodslist[k].zk_final_price) * this.goodslist[k].rate
      },
      personScroll () {
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.father, {
              startX: 0,
              click: true,
              scrollX: true,
              // 忽略竖直方向的滚动
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            this.scroll.refresh()
          }
        })
      },
      getRandom (start, end, fixed = 0) {
        const differ = end - start
        const random = Math.random()
        return (start + differ * random).toFixed(fixed)
      },
      getdata () {
        var _this = this
        $.get('http://zsxt.letuilm.com/api/v1/tgxt',
          {
            itemId: this.itemId,
            rate: 0.05,
            num: 100,
            type: 1
          }, function (res) {
            // console.log(moment().format('YYYY-MM-DD HH:mm:ss'))
            for (let i = 0; i < parseInt(_this.num); i++) {
              var obj = JSON.parse(JSON.stringify(res.data))
              obj.rate = 0.02
              const mid = _this.getRandom(_this.startm, _this.endm)
              const timer = moment(_this.midtime).subtract(mid, 'second').format('YYYY-MM-DD HH:mm:ss')
              _this.midtime = timer
              obj.time = timer
              obj.forecast = obj.zk_final_price * obj.rate
              _this.goodslist.push(obj)
            }
            // console.log(timelist)
            // obj.time = _this.getRandom(23000, 24800)
            // _this.goodslist.push(obj)
            console.log(_this.goodslist)
          }
        )
      }
    }
  }
</script>
<style lang='less' scoped>
  @font-face {
    font-family: pubfont;
    font-weight: normal;
    font-style: normal;
    src: url('../../assets/font/font_55467_qntwequuqdm.ttf') format('truetype')
  }

  /* @import "//at.alicdn.com/t/font_55467_q69s0qa8yba.css"; */

  .pubfont {
    font-size: 12px;
    vertical-align: -1px;
    font-family: pubfont;
    font-weight: 400;
    font-variant: normal;
    font-display: fallback;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }

  .pubfont.f16 {
    font-size: 16px
  }

  @font-face {
    font-family: pubcommoniconfont;
    src: url(//at.alicdn.com/t/font_1605820_wkvwm4acsva.eot);
    src: url(//at.alicdn.com/t/font_1605820_wkvwm4acsva.eot#iefix) format("embedded-opentype"),
    url(//at.alicdn.com/t/font_1605820_wkvwm4acsva.woff2) format("woff2"),
    url(//at.alicdn.com/t/font_1605820_wkvwm4acsva.woff) format("woff"),
    url(//at.alicdn.com/t/font_1605820_wkvwm4acsva.ttf) format("truetype"),
    url(//at.alicdn.com/t/font_1605820_wkvwm4acsva.svg#pubcommoniconfont) format("svg")
  }

  .pubcommonfont {
    font-display: fallback;
    font-family: pubcommoniconfont;
    line-height: 1;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }

  @import '../../assets/css/issue.css';
  .backissue {
    /*头部*/

    [mx-view*="mx-tabs/box"] {
      display: inline-block
    }

    .pub-threehd {
      position: relative;
      border-bottom: 1px solid var(--color-border)
    }

    .pub-threehd .pub-threehe {
      position: relative;
      float: left;
      padding: 10px 24px;
      font-size: 16px;
      line-height: var(--input-height);
      -webkit-transition: color var(--duration) ease-out;
      transition: color var(--duration) ease-out;
      color: #666
    }

    .pub-threehd .pub-threehe:hover {
      color: #333
    }

    .pub-threehd .pub-threehe.pub-threehf {
      color: var(--color-brand)
    }

    .pub-threehd .pub-threehe .pub-threehg {
      margin-left: -24px
    }

    .pub-threehd .pub-threehh {
      position: absolute;
      width: 0;
      height: 0;
      bottom: -1px;
      border-bottom: 2px solid var(--color-brand);
      -webkit-transition: width var(--duration) cubic-bezier(.645, .045, .355, 1), left var(--duration) cubic-bezier(.645, .045, .355, 1);
      transition: width var(--duration) cubic-bezier(.645, .045, .355, 1), left var(--duration) cubic-bezier(.645, .045, .355, 1)
    }

    .pub-threehi {
      position: relative;
      display: inline-block;
      height: var(--input-height);
      vertical-align: middle
    }

    .pub-threehi .pub-threehj {
      position: relative;
      top: 1px;
      font-size: 14px
    }

    .pub-threehi .pub-threehk {
      position: relative;
      padding: 0 12px;
      text-align: center;
      cursor: pointer;
      -webkit-transition: all var(--duration);
      transition: all var(--duration)
    }

    .pub-threehi .pub-threehk:first-child {
      border-top-left-radius: var(--border-radius);
      border-bottom-left-radius: var(--border-radius)
    }

    .pub-threehi .pub-threehk:last-child {
      border-top-right-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius)
    }

    .pub-threehi .pub-threehk .pub-threehg {
      margin-left: -14px
    }

    .pub-threehi.pub-threehl .pub-threehk {
      color: #999;
      cursor: not-allowed
    }

    .pub-threehi.pub-threehl .pub-threehk:hover {
      color: #999
    }

    .pub-threehi.pub-threehl .pub-threehk.pub-threehf {
      color: #999;
      background-color: var(--color-disabled);
      border-color: var(--color-border)
    }

    .pub-threehm .pub-threehk {
      position: relative;
      z-index: 2;
      display: inline-block;
      height: var(--input-height);
      line-height: calc(var(--input-height) - 2px);
      border-radius: var(--border-radius);
      color: #666;
      border: 1px solid transparent
    }

    .pub-threehm .pub-threehk:hover {
      color: #333
    }

    .pub-threehm .pub-threehk.pub-threehf {
      color: #333;
      background-color: var(--color-brand-opacity);
      border: 1px solid var(--color-brand)
    }

    .pub-threehm:after {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%
    }

    .pub-threehm:after,
    .pub-threehn {
      border-radius: var(--border-radius);
      border: 1px solid var(--border-highlight)
    }

    .pub-threehn .pub-threehk {
      display: inline-block;
      height: calc(var(--input-height) - 2px);
      line-height: calc(var(--input-height) - 2px);
      color: #999;
      background-color: #fff
    }

    .pub-threehn .pub-threehk:hover {
      color: #333
    }

    .pub-threehn .pub-threehk.pub-threehf {
      color: var(--color-brand);
      background-color: var(--color-brand-opacity)
    }

    /*底部版权*/

    .pub-threecS {
      margin: auto;
      padding: 30px 0;
      text-align: center
    }

    .pub-threecS .pub-threecT {
      line-height: 28px
    }

    .pub-threecS .pub-threecT .pub-threecU,
    .pub-threecS .pub-threecT .pub-threecV {
      padding-left: 10px;
      padding-right: 10px
    }

    .pub-threecS .pub-threecT .pub-threecU:first-child,
    .pub-threecS .pub-threecT .pub-threecV:first-child {
      padding-left: 0
    }

    .pub-threecS .pub-threecT .pub-threecU:last-child,
    .pub-threecS .pub-threecT .pub-threecV:last-child {
      padding-right: 0
    }

    .pub-threecS .pub-threecT .pub-threecU,
    .pub-threecS .pub-threecT .pub-threecU:active,
    .pub-threecS .pub-threecT .pub-threecU:focus,
    .pub-threecS .pub-threecT .pub-threecU:visited {
      color: #999
    }

    .pub-threecS .pub-threecT .pub-threecU:hover {
      color: #333
    }

    .pub-threecS .pub-threecT .pub-threecV {
      color: #999
    }

    .pub-threecS .pub-threecT .pub-threecU,
    .pub-threecS .pub-threecT .pub-threecV {
      position: relative
    }

    .pub-threecS .pub-threecT .pub-threecU:after,
    .pub-threecS .pub-threecT .pub-threecV:after {
      content: "";
      position: absolute;
      top: 1px;
      right: 0;
      width: 0;
      height: 12px;
      border-left: 1px solid #ccc
    }

    .pub-threecS .pub-threecT .pub-threecU:last-child:after,
    .pub-threecS .pub-threecT .pub-threecV:last-child:after {
      content: none
    }

    @media screen and (max-width: 767px) {

      .pub-threecS .pub-threecT .pub-threecU,
      .pub-threecS .pub-threecT .pub-threecV {
        padding: 0 5px
      }
    }

    .pub-threecW {
      position: relative;
      padding: 20px 180px 0;
      max-width: 100%;
      margin: auto;
      text-align: center
    }

    .pub-threecW:after {
      content: " ";
      position: absolute;
      left: 0;
      bottom: -14px;
      width: 100%;
      height: 0;
      border-bottom: 1px solid var(--color-border)
    }

    .pub-threecW .pub-threecX,
    .pub-threecW .pub-threecY {
      position: absolute;
      top: 20px
    }

    .pub-threecW .pub-threecX {
      left: 0
    }

    .pub-threecW .pub-threecX .pub-threecZ {
      position: relative;
      width: 100px;
      height: 160px;
      overflow: hidden;
      background-image: url(//img.alicdn.com/tfs/TB14rObn7PoK1RjSZKbXXX1IXXa-191-191.png);
      background-size: 100%;
      background-repeat: no-repeat
    }

    .pub-threecW .pub-threecX .pub-threed_ {
      position: absolute;
      top: 100px;
      left: -50px;
      font-size: 50px;
      color: #666
    }

    .pub-threecW .pub-threecY {
      right: 0;
      line-height: 22px;
      color: rgba(33, 33, 33, .5)
    }

    .pub-threecW .pub-threecY img {
      width: 92px;
      margin-bottom: 10px
    }

    .pub-threecW .pub-threeda {
      float: left;
      line-height: 28px
    }

    .pub-threecW .pub-threeda .pub-threedb {
      margin-bottom: 10px;
      opacity: .5
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] {
      background-color: #434459
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecU,
    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecU:active,
    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecU:focus,
    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecU:visited {
      color: hsla(0, 0%, 100%, .5)
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecU:hover {
      color: #fff
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecV {
      color: hsla(0, 0%, 100%, .5)
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecU:after,
    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecS .pub-threecT .pub-threecV:after {
      border-left: 1px solid hsla(0, 0%, 100%, .3)
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecW:after {
      border-bottom: 1px solid hsla(0, 0%, 100%, .2)
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecW .pub-threecX .pub-threed_,
    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecW .pub-threeda .pub-threedc a,
    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecW .pub-threeda .pub-threedb {
      color: #fff
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecW .pub-threeda .pub-threedc a:hover {
      color: var(--color-brand)
    }

    [mx-view*="mx-footer/index"][mx-view*="dark=true"] .pub-threecW .pub-threecY {
      color: hsla(0, 0%, 100%, .5)
    }

    /*表格部分*/

    [mx-view*="mx-table/excel"],
    [mx-view*="mx-table/index"] {
      position: relative
    }

    [mx-view*="mx-table/excel"] table,
    [mx-view*="mx-table/index"] table {
      table-layout: auto
    }

    [mx-view*="mx-table/excel"] .pub-threegU,
    [mx-view*="mx-table/excel"] .pub-threegV,
    [mx-view*="mx-table/index"] .pub-threegU,
    [mx-view*="mx-table/index"] .pub-threegV {
      position: absolute;
      left: 0;
      right: 0;
      overflow-x: scroll;
      overflow-y: hidden
    }

    [mx-view*="mx-table/excel"] .pub-threegV,
    [mx-view*="mx-table/index"] .pub-threegV {
      top: 0;
      z-index: 1;
      -ms-overflow-style: none;
      overflow: auto
    }

    [mx-view*="mx-table/excel"] .pub-threegV::-webkit-scrollbar,
    [mx-view*="mx-table/index"] .pub-threegV::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0
    }

    [mx-view*="mx-table/excel"] .pub-threegV::-webkit-scrollbar-thumb,
    [mx-view*="mx-table/index"] .pub-threegV::-webkit-scrollbar-thumb {
      background-color: transparent
    }

    [mx-view*="mx-table/excel"] .pub-threegU,
    [mx-view*="mx-table/index"] .pub-threegU {
      display: none;
      z-index: 2;
      opacity: .3
    }

    [mx-view*="mx-table/excel"] .pub-threegU .pub-threegW,
    [mx-view*="mx-table/index"] .pub-threegU .pub-threegW {
      height: 1px
    }

    [mx-view*="mx-table/excel"] .pub-threegU::-webkit-scrollbar,
    [mx-view*="mx-table/index"] .pub-threegU::-webkit-scrollbar {
      width: 14px;
      height: 14px
    }

    [mx-view*="mx-table/excel"] .pub-threegU::-webkit-scrollbar-thumb,
    [mx-view*="mx-table/index"] .pub-threegU::-webkit-scrollbar-thumb {
      background-color: var(--color-brand);
      border-radius: 7px
    }

    [mx-view*="mx-table/excel"] .pub-threegX,
    [mx-view*="mx-table/index"] .pub-threegX {
      -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, .06);
      box-shadow: 3px 0 4px rgba(0, 0, 0, .06)
    }

    /*底部*/

    .pub-threeij {
      display: inline-block
    }

    .pub-threeij .pub-threeik {
      float: left;
      background: #f4f4f4
    }

    .pub-threeij .pub-threeik a {
      display: block;
      padding: 10px 20px
    }

    .pub-threeij .pub-threeik .pub-threeil {
      color: #e4e4e4;
      background: #fafafa;
      cursor: not-allowed
    }

    /*下拉框*/

    .pub-threeu {
      padding: 0 10px
    }

    .pub-threev .pub-threew {
      padding: 0 5px
    }

    .pub-threex .pub-threew {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 30px;
      margin-left: -20px;
      margin-top: -15px;
      line-height: 30px;
      text-align: center
    }

    .pub-threex .pub-threey {
      display: inline-block;
      width: 50%;
      text-align: center
    }

    .pub-threex .pub-threez {
      padding-right: 10px
    }

    .pub-threex .pub-threeA {
      padding-left: 10px
    }

    .pub-threeB .pub-threez {
      color: var(--color-brand)
    }

    .pub-threeB .pub-threeA {
      color: var(--color-brand-vs)
    }

    [mx-view*="mx-calendar/rangepicker"] {
      min-width: 180px
    }

    [mx-view*="mx-calendar/datepicker"][mx-disabled] .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-disabled] .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-disabled] .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-disabled] .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-disabled]:hover .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-disabled]:hover .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-disabled]:hover .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-disabled]:hover .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"] .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"] .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"] .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"] .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"]:hover .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"]:hover .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"]:hover .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/datepicker"][mx-view*="disabled=true"]:hover .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled] .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled] .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled] .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled] .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled]:hover .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled]:hover .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled]:hover .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-disabled]:hover .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"] .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"] .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"] .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"] .pub-threeu .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"]:hover .pub-threeB .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"]:hover .pub-threeB .pub-threeA,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"]:hover .pub-threeu .pub-threez,
    [mx-view*="mx-calendar/rangepicker"][mx-view*="disabled=true"]:hover .pub-threeu .pub-threeA {
      color: #999
    }
  }
  .topsearch{
    padding: 20px;
    background-color: #fff;
  }
</style>
